import { useState, useEffect } from 'react'
import { CheckCircle, X, Info, AlertTriangle } from 'lucide-react'

interface ModernNotificationProps {
  isOpen: boolean
  onClose: () => void
  title: string
  message: string
  type?: 'success' | 'info' | 'warning' | 'error'
  details?: {
    aiExplanation?: string
    confidence?: number
    reasoning?: string
  }
  duration?: number
}

export default function ModernNotification({
  isOpen,
  onClose,
  title,
  message,
  type = 'success',
  details,
  duration = 4000
}: ModernNotificationProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [isClosing, setIsClosing] = useState(false)

  useEffect(() => {
    if (isOpen) {
      setIsVisible(true)
      setIsClosing(false)
      
      // 自动关闭
      if (duration > 0) {
        const timer = setTimeout(() => {
          handleClose()
        }, duration)
        return () => clearTimeout(timer)
      }
    }
  }, [isOpen, duration])

  const handleClose = () => {
    setIsClosing(true)
    setTimeout(() => {
      setIsVisible(false)
      onClose()
    }, 200)
  }

  const getIcon = () => {
    switch (type) {
      case 'success':
        return <CheckCircle size={20} className="text-green-500" />
      case 'info':
        return <Info size={20} className="text-blue-500" />
      case 'warning':
        return <AlertTriangle size={20} className="text-orange-500" />
      case 'error':
        return <AlertTriangle size={20} className="text-red-500" />
      default:
        return <CheckCircle size={20} className="text-green-500" />
    }
  }

  const getTypeStyles = () => {
    switch (type) {
      case 'success':
        return 'border-green-200 bg-green-50'
      case 'info':
        return 'border-blue-200 bg-blue-50'
      case 'warning':
        return 'border-orange-200 bg-orange-50'
      case 'error':
        return 'border-red-200 bg-red-50'
      default:
        return 'border-green-200 bg-green-50'
    }
  }

  if (!isVisible) return null

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center p-4 pointer-events-none">
      {/* 背景遮罩 */}
      <div 
        className={`absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity duration-200 ${
          isClosing ? 'opacity-0' : 'opacity-100'
        }`}
        onClick={handleClose}
      />
      
      {/* 通知卡片 */}
      <div 
        className={`relative w-full max-w-md transform transition-all duration-200 pointer-events-auto ${
          isClosing 
            ? 'scale-95 opacity-0 translate-y-2' 
            : 'scale-100 opacity-100 translate-y-0'
        }`}
      >
        <div className={`rounded-2xl border shadow-xl ${getTypeStyles()}`}>
          {/* 头部 */}
          <div className="flex items-start justify-between p-4">
            <div className="flex items-start gap-3 flex-1">
              <div className="flex-shrink-0 mt-0.5">
                {getIcon()}
              </div>
              <div className="flex-1 min-w-0">
                <h3 className="text-sm font-semibold text-slate-900 mb-1">
                  {title}
                </h3>
                <p className="text-sm text-slate-700 leading-relaxed">
                  {message}
                </p>
              </div>
            </div>
            <button
              onClick={handleClose}
              className="flex-shrink-0 p-1 text-slate-400 hover:text-slate-600 hover:bg-slate-200 rounded-lg transition-all ml-2"
            >
              <X size={16} />
            </button>
          </div>

          {/* AI详情区域 */}
          {details && (details.aiExplanation || details.confidence || details.reasoning) && (
            <div className="px-4 pb-4">
              <div className="bg-white/60 rounded-xl p-3 border border-white/40">
                <div className="flex items-center gap-2 mb-2">
                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  <span className="text-xs font-medium text-slate-700">AI解析详情</span>
                </div>
                
                {details.aiExplanation && (
                  <p className="text-xs text-slate-600 mb-2 leading-relaxed">
                    {details.aiExplanation}
                  </p>
                )}
                
                {details.reasoning && (
                  <p className="text-xs text-slate-600 mb-2 leading-relaxed">
                    <span className="font-medium">推理过程:</span> {details.reasoning}
                  </p>
                )}
                
                {details.confidence && (
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-slate-600">置信度:</span>
                    <div className="flex-1 bg-slate-200 rounded-full h-1.5">
                      <div 
                        className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
                        style={{ width: `${details.confidence * 100}%` }}
                      />
                    </div>
                    <span className="text-xs font-medium text-slate-700">
                      {Math.round(details.confidence * 100)}%
                    </span>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* 底部按钮 */}
          <div className="px-4 pb-4">
            <button
              onClick={handleClose}
              className="w-full py-2.5 px-4 bg-white/80 hover:bg-white text-slate-700 font-medium rounded-xl border border-white/60 transition-all duration-200 active:scale-95"
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

// 便捷的Hook
export function useModernNotification() {
  const [notification, setNotification] = useState<{
    isOpen: boolean
    title: string
    message: string
    type?: 'success' | 'info' | 'warning' | 'error'
    details?: {
      aiExplanation?: string
      confidence?: number
      reasoning?: string
    }
    duration?: number
  }>({
    isOpen: false,
    title: '',
    message: '',
    type: 'success'
  })

  const showNotification = (config: {
    title: string
    message: string
    type?: 'success' | 'info' | 'warning' | 'error'
    details?: {
      aiExplanation?: string
      confidence?: number
      reasoning?: string
    }
    duration?: number
  }) => {
    setNotification({
      isOpen: true,
      ...config
    })
  }

  const hideNotification = () => {
    setNotification(prev => ({ ...prev, isOpen: false }))
  }

  const NotificationComponent = () => (
    <ModernNotification
      isOpen={notification.isOpen}
      onClose={hideNotification}
      title={notification.title}
      message={notification.message}
      type={notification.type}
      details={notification.details}
      duration={notification.duration}
    />
  )

  return {
    showNotification,
    hideNotification,
    NotificationComponent
  }
}
